<template>
  <div>
    <div class="center2">
      <el-row :gutter="20">
        <el-col :span="3"><div class="centerTitle">测评计划</div></el-col>
        <el-col :span="2" :offset="18" :xl="{span: 2, offset: 19}">
          <el-button v-if="this.menuList.includes('planAddPlanInfo')" type="primary" size="medium" @click="addPlanFn">新增计划</el-button>
        </el-col>
      </el-row>
      <p>分发同一个ID测评计划的学生，才会统计在同一份团体报告中。</p>
      <el-row :gutter="24" class="centerTable">
        <el-table :data="tableData" border style="width: 100%" :menuList="this.menuList">
          <el-table-column prop="id" label="ID" align="center"></el-table-column>
          <el-table-column prop="plan_title" label="计划名称" align="center">
            <template slot-scope="scope">
              <span v-if="scope.$index === 0">
                <el-input v-model="form.plan_title" placeholder="请输入计划名称"></el-input>
              </span>
              <span v-else> {{scope.row.plan_title}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="title" label="组合或量表名称" align="center">
            <template slot-scope="scope">
              <span v-if="scope.$index === 0">
                <el-input v-model="form.title" placeholder="请输入组合或量表名称"></el-input>
              </span>
              <span v-else> {{scope.row.title}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="evaluated_number" label="测评人次" align="center"></el-table-column>
          <el-table-column prop="completion_schedule" label="完成进度" align="center"></el-table-column>
          <el-table-column prop="gauge_number" label="测评量表数量" align="center"></el-table-column>
          <el-table-column prop="question_number" label="题量" align="center"></el-table-column>
          <el-table-column prop="" label="用时" align="center"></el-table-column>
          <el-table-column prop="status_title" label="状态" align="center">
            <template slot-scope="scope">
              <span v-if="scope.$index === 0">
                <el-select v-model="form.status" placeholder="请选择计划名称">
                  <el-option v-for="item in optionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </span>
              <span v-else> {{scope.row.status_title}} </span>
            </template>
          </el-table-column>
          <el-table-column prop="start_time" label="开始时间" align="center"></el-table-column>
          <el-table-column prop="end_time" label="结束时间" align="center"></el-table-column>
          <el-table-column prop="operation" label="操作" align="center">
              <template slot-scope="scope">
                <template v-if="scope.$index !==0">
                  <el-button v-if="(scope.row.status_title === '进行中' || scope.row.status_title === '未开始') && menuList.includes('planEditPlanInfo')" type="text" round size="mini" @click="examine('edit',scope.row,scope.row.status_title)">编辑</el-button>
                  <el-button v-if="menuList.includes('planProgress')" type="text" round size="mini" @click="examine('progress',scope.row)">测评进度</el-button>
                  <el-button v-if="menuList.includes('planTestDispatch')" type="text" round size="mini" @click="examine('test',scope.row)">试测</el-button>
                  <el-button v-if="menuList.includes('planCopyDispatch')" type="text" round size="mini" @click="examine('copy',scope.row)">复制</el-button>
                  <el-button v-if="scope.row.status_title === '进行中' && menuList.includes('planTerminationPlan')" type="text" round size="mini" @click="examine('termination',scope.row)" class="dangerTextBtn">终止</el-button>
                </template>
                <template v-else>
                  <el-button type="primary" round size="mini" @click="examine('search',scope.row)">查询</el-button>
                  <el-button type="text" @click="examine('remove',scope.row)">清除</el-button>
                </template>
              </template>
            </el-table-column>
        </el-table>
      </el-row>
      <el-row :gutter="24" class="fr">
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="this.limit" layout="total, prev, pager, next" :total="total"> </el-pagination>
      </el-row>
    </div>
  </div>
</template>
<script>
import {APIPLANSLISTTABLE, APITERMINATIONPLAN, APIPRETESTPLAN} from '@/common/api.js'
export default {
  data () {
    return {
      menuList: [],
      isAddPlan: false,
      optionList: [
        {id: 1, name: '未开始'},
        {id: 2, name: '进行中'},
        {id: 3, name: '已结束'}
      ],
      form: {
        plan_title: '',
        title: '',
        status: ''
      },
      seacherTab: {
        id: '',
        plan_title: '',
        title: '',
        evaluated_number: '',
        completion_schedule: '',
        gauge_number: '',
        question_number: '',
        status_title: '',
        start_time: '',
        end_time: ''
      },
      tableData: [],
      currentPage: 1,
      total: 0,
      page: 1,
      limit: 10
    }
  },
  created () {
    this.menuList = sessionStorage.getItem('list')
    this.tableList()
  },
  methods: {
    tableList () { // 表格
      this.form.page = this.page
      this.form.limit = this.limit
      APIPLANSLISTTABLE(this.form).then((res) => {
        if (res.status === 1) {
          this.total = res.data.totalNumber
          this.currentPage = res.data.page
          this.tableData = res.data.list
          this.tableData.splice(0, 0, this.seacherTab)
        } else {
          this.$message.error(res.msg)
          this.tableData = []
          this.tableData.push(this.seacherTab)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    addPlanFn () {
      this.$router.push({path: '/addplan'})
    },
    examine (id, row, type) { // 按钮
      if (id === 'search') { // 搜素
        this.tableList()
      } else if (id === 'remove') { // 清除
        this.form = []
        this.tableList()
      } else if (id === 'edit') { // 编辑
        if (type === '进行中') {
          this.$router.push({path: '/editplan', query: {id: row.id, type: 1}})
        } else if (type === '未开始') {
          this.$router.push({path: '/editplan', query: {id: row.id, type: 2}})
        }
      } else if (id === 'copy') {
        this.$router.push({path: '/copyplan', query: {id: row.id}})
      } else if (id === 'progress') {
        this.$router.push({path: '/progress', query: {id: row.id, plan_title: row.plan_title}})
      } else if (id === 'termination') {
        this.terminationFn(row.id)
      } else if (id === 'test') {
        this.testFn(row)
      }
    },
    handleCurrentChange (val) { // 分页
      this.page = val
      this.tableList()
    },
    terminationFn (id) { // 终止
      this.$confirm('此操作将永久终止该计划, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        APITERMINATIONPLAN({
          plan_id: id
        }).then((res) => {
          if (res.status === 1) {
            this.tableList()
            this.$message({
              type: 'success',
              message: '终止成功!'
            })
          }
        }).catch((err) => {
          this.$message.error(err.msg)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    testFn (row) {
      APIPRETESTPLAN({
        plan_type: 4,
        public_ids: row.id
      }).then((res) => {
        if (res.status === 1) {
          window.open(res.data.url, '_blank')
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
